<script setup lang="ts">
import Login from './components/login-component/index.vue'
import Register from './components/register-component/index.vue'
import { ref } from 'vue';
const activeKey = ref('1')
</script>

<template>
  <div class="login">
    <div class="left">
      <div class="top">
        <h1>知识分享者的家园</h1>
        <div>在这里，每个想法都值得被聆听</div>
      </div>
      <div class="bottom">
        探索、创作、分享，成就你的知识殿堂
      </div>
    </div>
    <div class="right">
      <a-tabs v-model:activeKey="activeKey" class="tab">
        <a-tab-pane key="1" tab="登陆">
          <Login></Login>
        </a-tab-pane>
        <a-tab-pane key="2" tab="注册" force-render>
          <Register></Register>
        </a-tab-pane>
      </a-tabs>
    </div>
  </div>
</template>
<style scoped lang="scss">
.login{
  display: flex;
  height: 100vh;
  width: 100vw;
  justify-content: space-between;
  .left{
    width: 720px;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)),
    linear-gradient(90deg, rgba(37, 99, 235, 0.8) 0%, rgba(0, 0, 0, 0) 100%),
    url("@/assets/login.jpg");
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 40px;
    color: white;
    h1{
      font-size: 35px;
      font-weight: 600;
      margin-bottom: 10px;
    }
    .top>div{
      font-size: 18px;
    }
  }
  .right{
    flex: 1;
    position: relative;
    .tab{
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  }
}
</style>